/*
Theme Name:3pixel
Theme URI: http://templates.silversite.pl/snaps/demo/
Description: Creative Template is based on AmazeUI-2.5.0 and WordPress 4.4.1
Author: 3pixel
Author URI: www.piexl.net
Version: 0.0.1
Text Domain:3pixel
License: GNU General Public License version 3.0
License URI: http://amazeui.org
*/



//透明度
.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}
//圆角
.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
//阴影
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color:#000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

//垂直居中对其的盒子
.center_v{
    /* Center vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
//input的placeholder颜色
.placeholder(@color: @input-color-placeholder){
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}
img{
  max-width:100%;
}

//单行文字溢出省略
.single_text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
//多单行文字溢出省略
.multi_text(@linenum){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:@linenum;
  -webkit-box-orient: vertical;
}


.animation(@name,@duration,@speed,@number,@direction, @mode){
  //@name 动画的名称
  //@duration 规定动画完成一个周期所花费的秒或毫秒
  //@speed 规定动画完成一个周期所花费的秒或毫秒 
          //linear (动画从头到尾的速度是相同的)
          //ease (默认。动画以低速开始，然后加快，在结束前变慢。)
          //ease-in (动画以低速开始。)
          //ease-out (动画以低速结束。)
          //ease-out (动画以低速结束。)
          //ease-in-out (动画以低速开始和结束。)
          //cubic-bezier(n,n,n,n) (在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。)
  //@delay 定义动画开始前等待的时间，以秒或毫秒计
  //@number 定义动画播放次数的数值 n 或 infinite（规定动画应该无限次播放）。 
  //@direction 规定动画是否在下一周期逆向地播放。normal（默认值。动画应该正常播放。） alternate（动画应该轮流反向播放。）； 
  //@State 规定动画是否在下一周期逆向地播放。 paused（规定动画已暂停。） running（规定动画正在播放。）； 
  //@mode 规定动画是否在下一周期逆向地播放。  
          //none(不改变默认行为。)
          //forwards(当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）)
          //backwards(在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）)
          //both(向前和向后填充模式都被应用)

animation: @name @duration @speed  @number @direction @mode;
-ms-animation:@name @duration @speed  @number @direction @mode;
-moz-animation:@name @duration @speed  @number @direction @mode;
-webkit-animation:@name @duration @speed  @number @direction @mode;
-o-animation:@name @duration @speed  @number @direction @mode;
}

.animation_duration(@time){
  animation-duration:@time;
  -ms-animation-duration:@time;
  -moz-animation-duration:@time;
  -webkit-animation-duration:@time;
  -o-animation-duration:@time;
}
.animation_delay(@time){
  animation-delay:@time;
  -ms-animation-delay:@time;
  -moz-animation-delay:@time;
  -webkit-animation-delay:@time;
  -o-animation-delay:@time;
}


//动画的定义
.animation{
  from {
    width:100px;
    height:100px;
    background-color:blue;
  }
  to {
    width:300px;
    height:300px;
    background-color:red;
  }
}
@keyframes animation{ .animation}
@-moz-keyframes animation{ .animation}
@-webkit-keyframes animation { .animation}
@-o-keyframes animation { .animation}
// 动画的示例
.animation_demo{
  width:100px;
  height:100px;
  background-color:blue;
  .animation(animation,2s,ease-in-out,1,normal,forwards);
}
//过度动画
.transition(@property,@duration,@timing-function,@delay){
  //@property 过渡效果的 CSS 属性的名称
    //none  没有属性会获得过渡效果
    //all  所有属性都将获得过渡效果。
    //property  定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。如：width,height
  //@duration 完成过渡效果需要多少秒或毫秒
    //time 如：'2s' '10000ms'
  //@timing-function  速度效果的速度曲线
    //linear (动画从头到尾的速度是相同的)
    //ease (默认。动画以低速开始，然后加快，在结束前变慢。)
    //ease-in (动画以低速开始。)
    //ease-out (动画以低速结束。)
    //ease-out (动画以低速结束。)
    //ease-in-out (动画以低速开始和结束。)
    //cubic-bezier(n,n,n,n) (在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。)
  //@delay  过渡效果何时开始
    //time 如：'2s' '10000ms'
  transition:@property @duration @timing-function @delay;
  -ms-transition:@property @duration @timing-function @delay;
  -moz-transition:@property @duration @timing-function @delay;
  -webkit-transition:@property @duration @timing-function @delay;
  -o-transition:@property @duration @timing-function @delay;
}
//过度动画示例
.transition_demo{
  width:100px;
  height:100px;
  background-color:blue;
  .transition(all,2s,ease,0s);
  &:hover{
    width:300px;
    height:300px;
    background-color:red;
  }
}

//none  定义不进行转换。
//matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
//matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。  
//translate(x,y)  定义 2D 转换
//translate3d(x,y,z)  定义 3D 转换。 
//translateX(x) 定义转换，只是用 X 轴的值
//translateY(y) 定义转换，只是用 Y 轴的值
//translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 
//scale(x,y)  定义 2D 缩放转换
//scale3d(x,y,z)  定义 3D 缩放转换。 
//scaleX(x) 通过设置 X 轴的值来定义缩放转换。
//scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
//scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。  
//rotate(angle) 定义 2D 旋转，在参数中规定角度。
//rotate3d(x,y,z,angle) 定义 3D 旋转。 
//rotateX(angle)  定义沿着 X 轴的 3D 旋转。
//rotateY(angle)  定义沿着 Y 轴的 3D 旋转。
//rotateZ(angle)  定义沿着 Z 轴的 3D 旋转。
//skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
//skewX(angle)  定义沿着 X 轴的 2D 倾斜转换。
//skewY(angle)  定义沿着 Y 轴的 2D 倾斜转换。  
//perspective(n)  为 3D 转换元素定义透视视图。
.transform(){


transform:rotate(7deg);
-ms-transform:rotate(7deg);   /* IE 9 */
-moz-transform:rotate(7deg);  /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);  /* Opera */
}

//3d偏移
.transform_translate3d(@x,@y,@z){
  transform:translate3d(@x,@y,@z);
  -ms-transform:translate3d(@x,@y,@z);   /* IE 9 */
  -moz-transform:translate3d(@x,@y,@z);  /* Firefox */
  -webkit-transform:translate3d(@x,@y,@z); /* Safari 和 Chrome */
  -o-transform:translate3d(@x,@y,@z);  /* Opera */
}
.transform_translate3d_demo{
  width:200px;
  height:200px;
  background-color:#ddd;
  .border-radius(30px);
  .transform_translate3d(60px,90px,100px);
}
//3d偏移旋转
.transform_scale3d(@x,@y,@z){
  transform:scale3d(@x,@y,@z);
  -ms-transform:scale3d(@x,@y,@z);   /* IE 9 */
  -moz-transform:scale3d(@x,@y,@z);  /* Firefox */
  -webkit-transform:scale3d(@x,@y,@z); /* Safari 和 Chrome */
  -o-transform:scale3d(@x,@y,@z);  /* Opera */
}
.transform_scale3d_demo{
  width:200px;
  height:200px;
  background-color:#ddd;
  .border-radius(30px);
  .transition(all,2s,ease,0s);
  &:hover{
    .transform_scale3d(1.1,1.2,1.3);
  }
}



//角度旋转
.transform_rotate(@angle){
  transform:rotate(@angle);
  -ms-transform:rotate(@angle);   /* IE 9 */
  -moz-transform:rotate(@angle);  /* Firefox */
  -webkit-transform:rotate(@angle); /* Safari 和 Chrome */
  -o-transform:rotate(@angle);  /* Opera */
}
.transform_rotate_demo{
  width:200px;
  height:200px;
  background-color:#ddd;
  .border-radius(30px);
  .transform_rotate(30deg);
}
//3dX轴旋转
.transform_rotateX(@angle){
  transform:rotateX(@angle);
  -ms-transform:rotateX(@angle);   /* IE 9 */
  -moz-transform:rotateX(@angle);  /* Firefox */
  -webkit-transform:rotateX(@angle); /* Safari 和 Chrome */
  -o-transform:rotateX(@angle);  /* Opera */
}
.transform_rotateX_demo{
  width:200px;
  height:200px;
  background-color:#999;
  .border-radius(20px);
  .transform_rotateX(60deg);
}
//3dY轴旋转
.transform_rotateY(@angle){
  transform:rotateY(@angle);
  -ms-transform:rotateY(@angle);   /* IE 9 */
  -moz-transform:rotateY(@angle);  /* Firefox */
  -webkit-transform:rotateY(@angle); /* Safari 和 Chrome */
  -o-transform:rotateY(@angle);  /* Opera */
}
.transform_rotateY_demo{
  width:200px;
  height:200px;
  background-color:#999;
  .border-radius(20px);
  .transform_rotateY(60deg);
}
//3dZ轴旋转
.transform_rotateZ(@angle){
  transform:rotateZ(@angle);
  -ms-transform:rotateZ(@angle);   /* IE 9 */
  -moz-transform:rotateZ(@angle);  /* Firefox */
  -webkit-transform:rotateZ(@angle); /* Safari 和 Chrome */
  -o-transform:rotateZ(@angle);  /* Opera */
}
.transform_rotateZ_demo{
  width:200px;
  height:200px;
  background-color:#999;
  .border-radius(20px);
  .transform_rotateZ(60deg);
}

//3dX轴倾斜
.transform_skewX(@angle){
  transform:skewX(@angle);
  -ms-transform:skewX(@angle);   /* IE 9 */
  -moz-transform:skewX(@angle);  /* Firefox */
  -webkit-transform:skewX(@angle); /* Safari 和 Chrome */
  -o-transform:skewX(@angle);  /* Opera */
}
.transform_skewX_demo{
  width:200px;
  height:200px;
  background-color:#ddd;
  .border-radius(30px);
  .transform_skewX(30deg);
}
//3dY轴倾斜
.transform_skewY(@angle){
  transform:skewY(@angle);
  -ms-transform:skewY(@angle);   /* IE 9 */
  -moz-transform:skewX(@angle);  /* Firefox */
  -webkit-transform:skewY(@angle); /* Safari 和 Chrome */
  -o-transform:skewY(@angle);  /* Opera */
}
.transform_skewY_demo{
  width:200px;
  height:200px;
  background-color:#ddd;
  .border-radius(30px);
  .transform_skewY(30deg);
}
//旋转动画
.animation-rotate{
  from {
    .transform_rotate(0deg);
  }
  to {
    .transform_rotate(360deg);
  }
}
@keyframes animation-rotate{ .animation-rotate}
@-moz-keyframes animation-rotate{ .animation-rotate}
@-webkit-keyframes animation-rotate { .animation-rotate}
@-o-keyframes animation-rotate { .animation-rotate}

//反向旋转动画
.animation-rotate-un{
  from {
    .transform_rotate(0deg);
  }
  to {
    .transform_rotate(-360deg);
  }
}
@keyframes animation-rotate-un{ .animation-rotate-un}
@-moz-keyframes animation-rotate-un{ .animation-rotate-un}
@-webkit-keyframes animation-rotate-un { .animation-rotate-un}
@-o-keyframes animation-rotate-un { .animation-rotate-un}

//旋转中心
.transform-origin(@x,@y){
  -ms-transform-origin:@x @y;   /* IE 9 */
  -moz-transform-origin:@x @y;  /* Firefox */
  -webkit-transform-origin:@x @y; /* Safari 和 Chrome */
  -o-transform-origin:@x @y;  /* Opera */
}


//单行文字溢出省略
.yu-single-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
//多单行文字溢出省略
.yu-multi-text(@linenum){
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:@linenum;
  -webkit-box-orient: vertical;
}

//基础变量的定义
@color-blue:#46adc5;//主色
@color-gray:#212121;//辅色
@color-lightgray:#f8f8f8;//浅灰
@color-white:#fff;//白色

//字体
.yu-text-bold{font-weight:bold;}
.yu-text-normal{font-weight:normal;}
.yu-text-primary{color:@color-gray};
.yu-text-lightgray{color:lighten(@color-gray,10%)};
.yu-border-bottom-blue{border-bottom:2px solid @color-blue;}

//字颜色
.yu-color-blue{color:@color-blue;}
.yu-color-white{color:@color-white;}

//背景颜色
.yu-bg-blue{background-color:@color-blue;}
.yu-bg-white{background-color:@color-white;}


body{
	background-color:lighten(@color-lightgray,1%);
}


//头部开始
.header{
	.am-input-group{
		.am-form-field{height:32px;}
	}
	.am-btn{background-color:@color-blue; height:32px; line-height:14px; border:1px solid @color-blue; color:@color-white;
		&:hover{
			background-color:darken(@color-blue, 10%);
		}
	}

}

//底部开始
.footer{
	//icon
	.icon{display:inline-block; margin:5px 0; padding-left:36px; line-height:32px; background:url(assets/imgs/icon_phone.png) no-repeat 0 0;}
	.icon_phone{background-image:url(assets/imgs/icon_phone.png);}
	.icon_email{background-image:url(assets/imgs/icon_email.png);}
	.icon_weixin{background-image:url(assets/imgs/icon_weixin.png);}
	.icon_map{background-image:url(assets/imgs/icon_map.png);}
	.icon_weibo{background-image:url(assets/imgs/icon_weibo.png);}
	.icon_codepen{background-image:url(assets/imgs/icon_codepen.png);}
	.icon_boot{background-image:url(assets/imgs/icon_boot.png);}
	.icon_git{background-image:url(assets/imgs/icon_git.png);}
	.icon_amaze{background-image:url(assets/imgs/icon_amaze.png);}
	.icon_web{background-image:url(assets/imgs/icon_web.png);}
	.icon_weibo{background-image:url(assets/imgs/icon_weibo.png);}
	.icon_ndn{background-image:url(assets/imgs/icon_ndn.png);}
	.icon_dribbble{background-image:url(assets/imgs/icon_dribbble.png);}
	.icon_ysj{background-image:url(assets/imgs/icon_ysj.png);}
	.icon_zhanku{background-image:url(assets/imgs/icon_zhanku.png);}
	.icon_uichina{background-image:url(assets/imgs/icon_uichina.png);}
	.icon_huaban{background-image:url(assets/imgs/icon_huaban.png);}
	.icon_weixin{
		color:@color-blue;
		cursor:pointer;
		&:hover{
			color:darken(@color-blue, 10%);
		}
	}
	background-color:@color-lightgray;
	border-top:1px solid #ddd;
	.am-u-md-6{padding-left:0; padding-right:10px;}
	.foot_last{
		background-color:darken(@color-lightgray,6%);
	}
}

//搜索列表页
#serch_main{
	.list{
		background-color:@color-white;
		.img_link{
			line-height:0;
			font-size:0;
			display:inline-block;
			overflow:hidden;
			width:100%;
			img{
				.transition(all,1s,ease,0s);
				&:hover{
					.transform_scale3d(1.1,1.1,1);
				}
			}
		}
		.list_info{border-top:1px solid #ddd;}
		.list_title{.yu-single-text;}
		.list_describe{.yu-multi-text(4);}
		.right_info{
			position:relative;
			.out_link{
				position: absolute;
				top:0;
				right:18px;
				height: 32px;
				font-size:16px;
    			line-height: 14px;
			}
		}
	}
}
//web作品列表页
#web_main{
	.list_box{

	}
	.list{
		background-color:@color-white;
		.img_link{
			line-height:0;
			font-size:0;
			display:inline-block;
			overflow:hidden;
      width:100%;
			img{
				.transition(all,1s,ease,0s);
				&:hover{
					.transform_scale3d(1.1,1.1,1);
				}
			}
		}
		.list_info{border-top:1px solid #ddd;}
		.list_title{.yu-single-text;}
		.list_describe{.yu-multi-text(4); height:5.5em;}
		.img_info{
			position:relative;
			.out_link{
				position: absolute;
				top:0;
				right:2px;
				height: 32px;
				font-size:16px;
    			line-height: 14px;
			}
		}
	}
}
//移动端作品列表页
#moblie_main{
  .list_box{

  }
  .list{
    background-color:@color-white;
    .img_link{
      line-height:0;
      font-size:0;
      display:inline-block;
      overflow:hidden;
      width:100%;
      img{
        .transition(all,1s,ease,0s);
        &:hover{
          .transform_scale3d(1.1,1.1,1);
        }
      }
      position:relative;
      .code_box{
        width:100%;
        height:100%;
        background-color:rgba(0, 0, 0, 0.5);
        visibility:hidden;
        .center_v;
        position:absolute;
        top:0;
        left:0;
        .code{
          padding:10px;
          margin:0;
          background-color:#fff;
        }
      }
    }
    .list_title{.yu-single-text;}
    .list_describe{
      border-top:1px solid darken(@color-lightgray, 10%);
      border-bottom:1px solid darken(@color-lightgray, 10%);
      .multi_text(2);
      height:52px;
      p{
        margin:0;
      }
    }
    .img_info{
      position:relative;
      .out_link{
        position: absolute;
        top:0;
        right:2px;
        height: 32px;
        font-size:16px;
          line-height: 14px;
      }
    }
  }
}
//单页面
#single_main{
  .single{
    background-color:#fff;
    .single_title{
      padding-left:1rem;
      border-left:3px solid @color-blue;
    }
  }
  .sider_bar{
    background-color:darken(#fff,5%);
    .tilte{
      padding-left:1rem;
      border-left:3px solid @color-blue;
    }
    .rand_list{
      list-style:none;
      padding:0;
      li{ 
        .art_title{
          background-color:@color-blue;
          color:#fff;
          .single_text;
        }
        a{
          display:block;
          width:100%;
          overflow:hidden;
        }
        img{
          .transition(all,1s,ease,0s);
          &:hover{
            .transform_scale3d(1.1,1.1,1);
          }
        }
      }
    }
  }
}

//分页样式
.page_nav{
  a{
    padding:0.5em 1em;
    background-color:darken(@color-lightgray,3%);
    border:1px solid darken(@color-lightgray,5%);
    &:hover,&.current{
      background-color:@color-blue;
      color:#fff;
      border-color:darken(@color-blue,5%);
    }
  }
}

// 首页样式
#home_main{
  .part1{
    background-color:@color-blue;
    color:@color-gray;
  }
  .part3{
    .list{
      background-color:@color-white;
      .img_link{
        line-height:0;
        font-size:0;
        display:inline-block;
        overflow:hidden;
        width:100%;
        img{
          .transition(all,1s,ease,0s);
          &:hover{
            .transform_scale3d(1.1,1.1,1);
          }
        }
      }
      .list_info{border-top:1px solid #ddd;}
      .list_title{.yu-single-text;}
      .list_describe{.yu-multi-text(2); height:3.4em;}
      .img_info{
        position:relative;
        .out_link{
          position: absolute;
          top:0;
          right:2px;
          height: 32px;
          font-size:16px;
            line-height: 14px;
        }
      }
    }
  }
  .part4{
    .list{
      background-color:@color-white;
      .img_link{
        line-height:0;
        font-size:0;
        display:inline-block;
        overflow:hidden;
        width:100%;
        img{
          .transition(all,1s,ease,0s);
          &:hover{
            .transform_scale3d(1.1,1.1,1);
          }
        }
        position:relative;
        .code_box{
          width:100%;
          height:100%;
          background-color:rgba(0, 0, 0, 0.5);
          visibility:hidden;
          .center_v;
          position:absolute;
          top:0;
          left:0;
          .code{
            padding:10px;
            margin:0;
            background-color:#fff;
          }
        }
      }
      .list_title{.yu-single-text;}
      .list_describe{
        border-top:1px solid darken(@color-lightgray, 10%);
        border-bottom:1px solid darken(@color-lightgray, 10%);
        .multi_text(2);
        height:52px;
        p{
          margin:0;
        }
      }
      .img_info{
        position:relative;
        .out_link{
          position: absolute;
          top:0;
          right:2px;
          height: 32px;
          font-size:16px;
            line-height: 14px;
        }
      }
    }
  }
  .part5{
    .list{
      background-color:@color-white;
      .img_link{
        line-height:0;
        font-size:0;
        display:inline-block;
        overflow:hidden;
        width:100%;
        img{
          .transition(all,1s,ease,0s);
          &:hover{
            .transform_scale3d(1.1,1.1,1);
          }
        }
      }
      .list_info{border-top:1px solid #ddd;}
      .list_title{.yu-single-text;}
      .list_describe{.yu-multi-text(3); p{margin-bottom:0.5em;}}
      .right_info{
        position:relative;
        .out_link{
          position: absolute;
          top:0;
          right:0;
          height: 32px;
          font-size:16px;
            line-height: 14px;
        }
      }
    }
  }
  .part6{
    .list{
      background-color:@color-white;
      .img_link{
        line-height:0;
        font-size:0;
        display:inline-block;
        overflow:hidden;
        width:100%;
        img{
          .transition(all,1s,ease,0s);
          &:hover{
            .transform_scale3d(1.1,1.1,1);
          }
        }
      }
      .list_info{border-top:1px solid #ddd;}
      .list_title{.yu-single-text;}
      .list_describe{.yu-multi-text(3); p{margin-bottom:0.5em;}}
      .right_info{
        position:relative;
        .out_link{
          position: absolute;
          top:0;
          right:0;
          height: 32px;
          font-size:16px;
            line-height: 14px;
        }
      }
    }
  }
}





